<template>
  <div>
    <el-collapse v-model="form" style="width: 80%; margin: 30px auto">
      <el-collapse-item title="反馈标题" name="1">
        <div>
          {{ title }}
        </div>
      </el-collapse-item>
      <el-collapse-item title="反馈内容" name="2">
        <div>
          {{ tex }}
        </div>
      </el-collapse-item>
      <el-collapse-item title="发布人" name="3">
        {{ Publisher }}
      </el-collapse-item>
      <el-collapse-item title="图片" name="4">
        <div style="display: flex">
          <div v-for="item in image" :key="item">
            <el-image
              style="width: 150px; height: 150px"
              :src="'http://localhost:3002' + item"
              fit="fill"
            />
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="回复内容" name="5">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          style="width: 50%; margin: 30px auto"
        >
          <el-form-item label="回复内容">
            <el-input v-model="form.text" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addHandle">提交</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import service from '../../api/messages'
export default {
  name: 'Messages',
  data() {
    return {
      title: '',
      tex: '',
      Publisher: '',
      image: [],
      form: {
        text: '',
        people: '',
        title: '',
        tex: '',
        Publisher: '',
        image: []
      }
    }
  },
  mounted() {
    const data = this.$route.query.value
    this.title = data.title
    this.tex = data.content
    this.Publisher = data.user.username
    this.image = data.images
  },
  methods: {
    // 提交
    addHandle() {
      const id = this.$route.query.value._id
      const Id = localStorage.getItem('userId')

      // const people = "";
      service
        .updataMessage(id, { reply: this.form.text, staff: Id })
        .then(() => {
          this.$router.push('/messages/index')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
